@duration: 3s;
@w: 30px;
.circle {
  width: @w;
  height: @w;
  border-radius: @w;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0px - @w / 2;
  margin-left: 0px - @w / 2;
  animation-play-state: paused;
  animation-name: g_animate;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.5, -0.1, 0.5, 1.1);
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.active {
    .g1,
    .g2,
    .g3,
    .g4 {
      animation-play-state: running;
    }
  }
}
.viewBox {
  position: relative;
}

.g1 {
  .circle;
}
.g2 {
  .circle;
  animation-delay: 0s - @duration * 0.75;
}
.g3 {
  .circle;
  animation-delay: 0s - @duration * 0.5;
}
.g4 {
  .circle;
  animation-delay: 0s - @duration * 0.25;
}

@keyframes g_animate {
  0% {
    background: rgb(149, 164, 126);
    transform: translate(0px, 0px - @w * 0.3) scale(1.2);
    z-index: 1;
  }
  25% {
    background: #442c0b;
    transform: translate(0px - @w * 1.5, 0px) scale(0.9);
    z-index: 2;
  }
  50% {
    background: rgb(194, 174, 159);
    transform: translate(0px, @w * 0.3) scale(1.2);
    z-index: 2;
  }
  75% {
    background: #442c0b;
    transform: translate(@w * 1.5, 0px) scale(0.9);
    z-index: 1;
  }
  100% {
    background: rgb(149, 164, 126);
    transform: translate(0px, 0px - @w * 0.3) scale(1.2);
    z-index: 1;
  }
}
